<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader>场地明细 </IHeader>
      <view class="segmented-with-icon-container" style="text-align: center; margin-top: 20rpx">
        <view style="margin-bottom: 10rpx">当前选择：按天</view>
        <!-- <uni-segmented-control :current="currentIndex" :values="tabs.map((item) => item.text)" @clickItem="onTabClick" styleType="text" class="segmented-control" /> -->
        <view @click="searchFun">
          <uni-icons type="calendar" size="18" :color="'#2979FF'" class="calendar-icon" />
          <text style="color: #2979ff"> {{ time[0] }} - {{ time[1] }} </text>
        </view>
      </view>
      <!-- <view class="search-container">
        <uni-search-bar @confirm="handleSearch" v-model="searchValue" @clear="handleSearch" placeholder="请输入场地名称"> </uni-search-bar>
      </view> -->
    </template>

    <view class="order-list-container wh_auto">
      <DetailRow :detail="item" v-for="(item, index) in orderList" :key="index" @init="selectDataLisFun"></DetailRow>
      <view class="wrapper whov" v-if="orderList.length === 0">
        <text class="empty-text">暂无数据</text>
      </view>
      <uni-calendar ref="calendarRef" :insert="false" range @confirm="confirmFun" />
    </view>

    <template #footer>
      <ITabBarManager :index="-1" />
    </template>
  </IFexHeaderMain>
</template>

<script setup lang="ts">
  import ITabBarManager from '@/components/container/ITabBarManager.vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import DetailRow from './components/DetailRow.vue'
  import { onMounted, ref, computed } from 'vue'
  import useUserInfoStore from '@/store/userInfo'
  import useToastMsg from '@/hooks/sysMsg'
  import { getDdHz, getUserStorageList } from '@/api/zmanager/order'
  import { formatTime } from '@/utils/tims'
  const toastMsg = useToastMsg()
  const orderList = ref<any[]>([])
  const currentIndex = ref(0)
  const calendarRef = ref()
  const time = ref<any[]>([])
  const searchValue = ref('')

  const userInfoStore = useUserInfoStore()
  const tabs = ref([
    { value: '1', text: '今日' },
    { value: '2', text: '本周' },
    { value: '3', text: '本月' },
    { value: '4', text: '上月' },
  ])
  const userInfo = computed(() => userInfoStore.getUserInfo)
  const handleSearch = () => {}
  onMounted(async () => onTabClick())
  const onTabClick = async (e?: any) => {
    currentIndex.value = e ? e.currentIndex : 0
    switch (currentIndex.value) {
      case 0:
        // time.value = [new Date(new Date().setHours(0, 0, 0, 0)).getTime(), new Date(new Date().setHours(23, 59, 59, 999)).getTime()]
        const yesterday = new Date()
        yesterday.setDate(yesterday.getDate() - 1)
        time.value = [new Date(yesterday.setHours(0, 0, 0, 0)).getTime(), new Date(yesterday.setHours(23, 59, 59, 999)).getTime()]
        break
      case 1:
        const curr = new Date() // 当前日期
        const first = curr.getDate() - curr.getDay() + 1 // 本周第一天
        const last = first + 6 // 本周最后一天
        time.value = [new Date(curr.setDate(first)).getTime(), new Date(curr.setDate(last)).getTime()]
        break
      case 2:
        const date = new Date()
        time.value = [new Date(date.getFullYear(), date.getMonth(), 1).getTime(), new Date(date.getFullYear(), date.getMonth() + 1, 0).getTime()]
        break
      case 3:
        const date1 = new Date()
        time.value = [new Date(date1.getFullYear(), date1.getMonth() - 1, 1).getTime(), new Date(date1.getFullYear(), date1.getMonth(), 0).getTime()]
        break
    }

    time.value = [formatTime(time.value[0], 'yyyy-MM-dd'), formatTime(time.value[1], 'yyyy-MM-dd')]
    selectDataLisFun()
  }
  const selectDataLisFun = async () => {
    toastMsg.showLoading()
    const result = await getDdHz(userInfo.value.userId, time.value[0] ? time.value[0] : '', time.value[1] ? time.value[1] : '')
    if (result) {
      orderList.value = result.data.npList
    }
    toastMsg.hideLoading()
  }
  const confirmFun = (e: any) => {
    time.value = [e.range.data[0], e.range.data[e.range.data.length - 1]]
    selectDataLisFun()
  }
  const searchFun = () => {
    currentIndex.value = 4
    calendarRef.value?.open()
  }
</script>
<style scoped>
  .order-list-container {
    padding: 20rpx;
    background-color: #f5f7fa;
    box-sizing: border-box;
  }

  .empty-text {
    font-size: 28rpx;
    color: #94a3b8;
    margin-top: 20rpx;
  }

  /* 分段器样式：占满剩余空间，避免被图标挤压 */
  .segmented-control {
    flex: 1; /* 关键：让分段器占据容器剩余所有空间 */
    height: 60rpx; /* 固定高度，与图标视觉协调（可根据需求调整） */
  }

  /* 日历图标样式：固定大小，居右 */
  .calendar-icon {
    color: #36bffa; /* 图标颜色，与分段器激活色一致（可选） */
    cursor: pointer; /* 鼠标悬浮时显示“手”形，提示可点击 */
    padding: 8rpx; /* 增加点击区域，提升体验 */
    padding-bottom: 0;
  }

  /* 原有样式保持不变... */
  .order-list-container {
    padding: 20rpx;
    background-color: #f5f7fa;
    box-sizing: border-box;
  }

  .empty-text {
    font-size: 28rpx;
    color: #94a3b8;
    margin-top: 20rpx;
  }
</style>
